import React, { useState } from "react";
import { useEdit, useHandle } from "@/common/hooks";
import SysDepart,{SysDepartTreePlus,OrgArrIndex} from "@/api/sys-depart";
import { Form, Space } from "antd";
import HButton from "@/components/ant-ext/HButton";
import HFormItem from "@/components/ant-ext/HFormItem";
import GetSelectNode, { HSearchTree } from "@/components/ant-ext/HSearchTree";
import "./index.less"
import HAction from "@/components/common/HAction";
import { HNotification } from "@/config/route/route-func";

type Context = {
  disable: boolean,
  idVisible: boolean,
  sysVisible:boolean,
}



export default function DeparManagement() {
  const [treeData, setTreeData] = useState<SysDepartTreePlus[]>([]);
  const [loading, setLoading] = useState(false)
  const [editLoading, setEditLoading] = useState(false)
  const [currentNode, setCurrentNode] = useState<SysDepartTreePlus>()

  const [context, setContext] = useState<Context>({
    disable: true,
    idVisible: false,
    sysVisible:false,
  })

  const [form] = Form.useForm();

  const reload = useHandle(() => SysDepart.selectTree({
    setLoading,
    success: (data => {
      const arr: never[] = []
      const treeDataMapping = OrgArrIndex(arr, data[0].children)
      setTreeData(treeDataMapping)
    })
  }), [])

  const saveAndFlush = useEdit(currentNode?.key ? SysDepart.doEdit : SysDepart.doSave, {
    setLoading: setEditLoading,
    success: () => {
      reload()
    }
  })

  const layout = {
    form: form
  }
  return (<div className="parent">
    <div className={"searchSelect"}>
      <Space style={{ marginBottom: "10px" }}>
        <HButton type={"primary"} onClick={() => {
          form.resetFields()
          form.setFieldValue("parentId", 0)
          setContext({ ...context, disable: false })
          setCurrentNode(undefined)
        }}> 添加一级节点</HButton>
        <HButton onClick={() => {
          if (currentNode) {
            setCurrentNode(undefined)
            setContext({ ...context, disable: false })
            form.resetFields()
            form.setFieldValue("parentId", currentNode.key)
          } else {
            HNotification.warning({ message: "请先选择父级菜单" })
          }
        }}> 添加子节点</HButton>
      </Space>
      <HSearchTree blockNode showLine showIcon={false} reload={reload} loading={loading} treeData={treeData}
        onSelect={(selectedKeys, info) => {
          const nodes = GetSelectNode(treeData, info.node)
          const currentNode = nodes[nodes.length - 1] as SysDepartTreePlus;
          setCurrentNode(currentNode)
          setContext({ ...context, disable: true })
          form.setFieldsValue({
            parentId: currentNode.parentId,
            id: currentNode.key,
            mobile: currentNode.mobile,
            deptName: currentNode.title,
          })
        }} />

    </div>
    <div className={"menuForm"}>
      <Form name={"submitForm"} labelCol={{ sm: 6 }} form={form} onFinish={() => {
        saveAndFlush({ body: form.getFieldsValue() })
      }}>
        <HFormItem {...layout} label={"父级id"} name={"parentId"} disabled={true} required={true} />

        <HFormItem {...layout} label={"id"} name={"id"} hidden={!context.idVisible} disabled={true} />

        <HFormItem {...layout} label={"名称"} name={"deptName"} required={true}/>

        <HFormItem {...layout} label={"手机号"} name={"mobile"} required={true} />

        <Space style={{ marginLeft: "200px" }}>
          <HButton loading={editLoading} type={"primary"} onClick={form.submit}>保存 </HButton>
          <HAction disabled={currentNode === undefined} confirm={{
            title: "是否删除[" + currentNode?.title + "]",
            ok: (setLoading) => {
              SysDepart.delete({
                body: { id: currentNode?.key }, setLoading: setLoading, success: () => {
                  setCurrentNode(undefined)
                  reload()
                  form.resetFields()
                }
              })
            },
          }}
          >
            删除
          </HAction>

        </Space>

      </Form>
    </div>
  </div>);
};
